import React from "react";
import { useEventCallback, useObservable } from "rxjs-hooks";
import { map, withLatestFrom } from "rxjs/operators";
import { interval } from 'rxjs'

function RxjsHook() {
  const value = useObservable((state$) => interval(1000).pipe(
   withLatestFrom(state$),
   map(([_num, state]) => state * state),
 ), 2)
  const [clickCallback, [description, x, y]] = useEventCallback(
    e =>
      e.pipe(
        map(event => [event.target.innerHTML, event.clientX, event.clientY])
      ),
    ["nothing", 0, 0]
  );

  return (
    <div className="App">
      <h1>{value}</h1>
      <h1>
        click position: {x}, {y}
      </h1>
      <h1>"{description}" was clicked.</h1>
      <button onClick={clickCallback}>click me</button>
      <button onClick={clickCallback}>click you</button>
      <button onClick={clickCallback}>click him</button>
    </div>
  );
}

export default RxjsHook;
